<template>
  <div class="exam-page">
    <!-- 标签页导航 -->
    <el-tabs v-model="activeTab" class="custom-tabs">
      <el-tab-pane label="所有考试" name="all">
        <div class="exam-list">
          <el-card
            v-for="item in filteredExams"
            :key="item.id"
            class="exam-card"
          >
            <div class="card-header">
              <span class="exam-name">培训班名称：{{ item.className }}</span>
              <span class="exam-tag" :class="getTagClass(item)">{{ getTagText(item) }}</span>
            </div>

            <div class="exam-info">
              <!-- 新增：报名类型显示 -->
              <div class="info-row">
                <div class="info-item">
                  <span class="label">班级编号：</span>
                  <span class="value">{{ item.classNo }}</span>
                </div>
                <div class="info-item">
                  <span class="label">培训类型：</span>
                  <span class="value">{{ item.trainType }}</span>
                </div>
                <div class="info-item">
                  <span class="label">培训项目：</span>
                  <span class="value">{{ item.project }}</span>
                </div>
                <div class="info-item">
                  <span class="label">报名类型：</span>
                  <span class="value">{{ item.signUpCategory }}</span>
                </div>
              </div>

              <div class="info-row">
                <div class="info-item">
                  <span class="label">班级状态：</span>
                  <span class="value">{{ item.classStatusName }}</span>
                </div>
                <div class="info-item">
                  <span class="label">开班方式：</span>
                  <span class="value">{{ item.startupType }}</span>
                </div>
                <div class="info-item">
                  <span class="label">所属部门：</span>
                  <span class="value">{{ item.departmentName }}</span>
                </div>
              </div>

              <div class="info-row">
                <div class="info-item">
                  <span class="label">培训时间：</span>
                  <span class="value">{{ item.trainStartTime }} 至 {{ item.trainEndTime }}</span>
                </div>
                <div class="info-item">
                  <span class="label">培训地点：</span>
                  <span class="value">{{ item.trainAddress }}</span>
                </div>
                <div class="info-item">
                  <span class="label">班主任：</span>
                  <span class="value">{{ item.headTeachers }}</span>
                </div>
              </div>

              <!-- 考试相关信息（已排考/已考试才显示） -->
              <div v-if="item.status !== '0'" class="info-row exam-specific">
                <div class="info-item">
                  <span class="label">考试时间：</span>
                  <span class="value">{{ item.startTime }} 至 {{ item.endTime }}</span>
                </div>
                <div class="info-item">
                  <span class="label">考试时长：</span>
                  <span class="value">{{ item.examDuration }}</span>
                </div>
                <div class="info-item">
                  <span class="label">考试地址：</span>
                  <span class="value">{{ item.examAddress }}</span>
                </div>
              </div>

              <div v-if="item.status !== '0'" class="info-row exam-specific">
                <div class="info-item">
                  <span class="label">考试途径：</span>
                  <span class="value">{{ item.examWay }}</span>
                </div>
                <div class="info-item">
                  <span class="label">通过分数：</span>
                  <span class="value">{{ item.passScore }}</span>
                </div>
                <div class="info-item">
                  <span class="label">可考次数：</span>
                  <span class="value">{{ item.examTimes }}</span>
                </div>
              </div>

              <!-- 学员个人信息 -->
              <div class="info-row student-info">
                <div class="info-item">
                  <span class="label">学员职位：</span>
                  <span class="value">{{ item.positionRank }}</span>
                </div>
                <div class="info-item">
                  <span class="label">满意度调查：</span>
                  <span class="value">{{ item.satisfactionStatus }}</span>
                </div>
                <div class="info-item">
                  <span class="label">报名时间：</span>
                  <span class="value">{{ item.registrationTime }}</span>
                </div>
              </div>

              <!-- 按钮区域：查看考卷 + 去考试 -->
              <div class="card-actions">
                <!-- 查看考卷（已考试） -->
                <el-button
                  v-if="item.status === '2'"
                  type="primary"
                  size="mini"
                  @click="showExamPaper(item)"
                >
                  查看考卷
                </el-button>
                <!-- 去考试（仅常规培训+已排考） -->
                <el-button
                  v-if="item.signUpCategory === '常规培训' && item.status === '1'"
                  type="primary"
                  size="mini"
                  @click="openExamDialog(item)"
                >
                  去考试
                </el-button>
              </div>
            </div>
          </el-card>

          <!-- 空状态提示 -->
          <div v-if="filteredExams.length === 0" class="empty-state">
            <el-empty description="暂无考试数据"></el-empty>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="已考试" name="2">
        <div class="exam-list">
          <el-card
            v-for="item in filteredExams"
            :key="item.id"
            class="exam-card"
          >
            <div class="card-header">
              <span class="exam-name">培训班名称：{{ item.className }}</span>
              <span class="exam-tag" :class="getTagClass(item)">{{ getTagText(item) }}</span>
            </div>

            <div class="exam-info">
              <!-- 报名类型显示 -->
              <div class="info-row">
                <div class="info-item">
                  <span class="label">班级编号：</span>
                  <span class="value">{{ item.classNo }}</span>
                </div>
                <div class="info-item">
                  <span class="label">培训类型：</span>
                  <span class="value">{{ item.trainType }}</span>
                </div>
                <div class="info-item">
                  <span class="label">培训项目：</span>
                  <span class="value">{{ item.project }}</span>
                </div>
                <div class="info-item">
                  <span class="label">报名类型：</span>
                  <span class="value">{{ item.signUpCategory }}</span>
                </div>
              </div>

              <div class="info-row">
                <div class="info-item">
                  <span class="label">班级状态：</span>
                  <span class="value">{{ item.classStatusName }}</span>
                </div>
                <div class="info-item">
                  <span class="label">开班方式：</span>
                  <span class="value">{{ item.startupType }}</span>
                </div>
                <div class="info-item">
                  <span class="label">所属部门：</span>
                  <span class="value">{{ item.departmentName }}</span>
                </div>
              </div>

              <div class="info-row">
                <div class="info-item">
                  <span class="label">培训时间：</span>
                  <span class="value">{{ item.trainStartTime }} 至 {{ item.trainEndTime }}</span>
                </div>
                <div class="info-item">
                  <span class="label">培训地点：</span>
                  <span class="value">{{ item.trainAddress }}</span>
                </div>
                <div class="info-item">
                  <span class="label">班主任：</span>
                  <span class="value">{{ item.headTeachers }}</span>
                </div>
              </div>

              <!-- 考试相关信息 -->
              <div class="info-row exam-specific">
                <div class="info-item">
                  <span class="label">考试时间：</span>
                  <span class="value">{{ item.startTime }} 至 {{ item.endTime }}</span>
                </div>
                <div class="info-item">
                  <span class="label">考试时长：</span>
                  <span class="value">{{ item.examDuration }}</span>
                </div>
                <div class="info-item">
                  <span class="label">考试地址：</span>
                  <span class="value">{{ item.examAddress }}</span>
                </div>
              </div>

              <div class="info-row exam-specific">
                <div class="info-item">
                  <span class="label">考试途径：</span>
                  <span class="value">{{ item.examWay }}</span>
                </div>
                <div class="info-item">
                  <span class="label">通过分数：</span>
                  <span class="value">{{ item.passScore }}</span>
                </div>
                <div class="info-item">
                  <span class="label">可考次数：</span>
                  <span class="value">{{ item.examTimes }}</span>
                </div>
              </div>

              <!-- 学员个人信息 -->
              <div class="info-row student-info">
                <div class="info-item">
                  <span class="label">学员职位：</span>
                  <span class="value">{{ item.positionRank }}</span>
                </div>
                <div class="info-item">
                  <span class="label">满意度调查：</span>
                  <span class="value">{{ item.satisfactionStatus }}</span>
                </div>
                <div class="info-item">
                  <span class="label">报名时间：</span>
                  <span class="value">{{ item.registrationTime }}</span>
                </div>
              </div>

              <!-- 按钮区域 -->
              <div class="card-actions">
                <el-button
                  type="primary"
                  size="mini"
                  @click="showExamPaper(item)"
                >
                  查看考卷
                </el-button>
              </div>
            </div>
          </el-card>

          <!-- 空状态提示 -->
          <div v-if="filteredExams.length === 0" class="empty-state">
            <el-empty description="暂无已考试数据"></el-empty>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="已排考" name="1">
        <div class="exam-list">
          <el-card
            v-for="item in filteredExams"
            :key="item.id"
            class="exam-card"
          >
            <div class="card-header">
              <span class="exam-name">培训班名称：{{ item.className }}</span>
              <span class="exam-tag" :class="getTagClass(item)">{{ getTagText(item) }}</span>
            </div>

            <div class="exam-info">
              <!-- 报名类型显示 -->
              <div class="info-row">
                <div class="info-item">
                  <span class="label">班级编号：</span>
                  <span class="value">{{ item.classNo }}</span>
                </div>
                <div class="info-item">
                  <span class="label">培训类型：</span>
                  <span class="value">{{ item.trainType }}</span>
                </div>
                <div class="info-item">
                  <span class="label">培训项目：</span>
                  <span class="value">{{ item.project }}</span>
                </div>
                <div class="info-item">
                  <span class="label">报名类型：</span>
                  <span class="value">{{ item.signUpCategory }}</span>
                </div>
              </div>

              <div class="info-row">
                <div class="info-item">
                  <span class="label">班级状态：</span>
                  <span class="value">{{ item.classStatusName }}</span>
                </div>
                <div class="info-item">
                  <span class="label">开班方式：</span>
                  <span class="value">{{ item.startupType }}</span>
                </div>
                <div class="info-item">
                  <span class="label">所属部门：</span>
                  <span class="value">{{ item.departmentName }}</span>
                </div>
              </div>

              <div class="info-row">
                <div class="info-item">
                  <span class="label">培训时间：</span>
                  <span class="value">{{ item.trainStartTime }} 至 {{ item.trainEndTime }}</span>
                </div>
                <div class="info-item">
                  <span class="label">培训地点：</span>
                  <span class="value">{{ item.trainAddress }}</span>
                </div>
                <div class="info-item">
                  <span class="label">班主任：</span>
                  <span class="value">{{ item.headTeachers }}</span>
                </div>
              </div>

              <!-- 考试相关信息 -->
              <div class="info-row exam-specific">
                <div class="info-item">
                  <span class="label">考试时间：</span>
                  <span class="value">{{ item.startTime }} 至 {{ item.endTime }}</span>
                </div>
                <div class="info-item">
                  <span class="label">考试时长：</span>
                  <span class="value">{{ item.examDuration }}</span>
                </div>
                <div class="info-item">
                  <span class="label">考试地址：</span>
                  <span class="value">{{ item.examAddress }}</span>
                </div>
              </div>

              <div class="info-row exam-specific">
                <div class="info-item">
                  <span class="label">考试途径：</span>
                  <span class="value">{{ item.examWay }}</span>
                </div>
                <div class="info-item">
                  <span class="label">通过分数：</span>
                  <span class="value">{{ item.passScore }}</span>
                </div>
                <div class="info-item">
                  <span class="label">可考次数：</span>
                  <span class="value">{{ item.examTimes }}</span>
                </div>
              </div>

              <!-- 学员个人信息 -->
              <div class="info-row student-info">
                <div class="info-item">
                  <span class="label">学员职位：</span>
                  <span class="value">{{ item.positionRank }}</span>
                </div>
                <div class="info-item">
                  <span class="label">满意度调查：</span>
                  <span class="value">{{ item.satisfactionStatus }}</span>
                </div>
                <div class="info-item">
                  <span class="label">报名时间：</span>
                  <span class="value">{{ item.registrationTime }}</span>
                </div>
              </div>

              <!-- 按钮区域 -->
              <div class="card-actions">
                <el-button
                  v-if="item.signUpCategory === '常规培训'"
                  type="primary"
                  size="mini"
                  @click="openExamDialog(item)"
                >
                  去考试
                </el-button>
              </div>
            </div>
          </el-card>

          <!-- 空状态提示 -->
          <div v-if="filteredExams.length === 0" class="empty-state">
            <el-empty description="暂无已排考数据"></el-empty>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="未排考" name="0">
        <div class="exam-list">
          <el-card
            v-for="item in filteredExams"
            :key="item.id"
            class="exam-card"
          >
            <div class="card-header">
              <span class="exam-name">培训班名称：{{ item.className }}</span>
              <span class="exam-tag" :class="getTagClass(item)">{{ getTagText(item) }}</span>
            </div>

            <div class="exam-info">
              <!-- 报名类型显示 -->
              <div class="info-row">
                <div class="info-item">
                  <span class="label">班级编号：</span>
                  <span class="value">{{ item.classNo }}</span>
                </div>
                <div class="info-item">
                  <span class="label">培训类型：</span>
                  <span class="value">{{ item.trainType }}</span>
                </div>
                <div class="info-item">
                  <span class="label">培训项目：</span>
                  <span class="value">{{ item.project }}</span>
                </div>
                <div class="info-item">
                  <span class="label">报名类型：</span>
                  <span class="value">{{ item.signUpCategory }}</span>
                </div>
              </div>

              <div class="info-row">
                <div class="info-item">
                  <span class="label">班级状态：</span>
                  <span class="value">{{ item.classStatusName }}</span>
                </div>
                <div class="info-item">
                  <span class="label">开班方式：</span>
                  <span class="value">{{ item.startupType }}</span>
                </div>
                <div class="info-item">
                  <span class="label">所属部门：</span>
                  <span class="value">{{ item.departmentName }}</span>
                </div>
              </div>

              <div class="info-row">
                <div class="info-item">
                  <span class="label">培训时间：</span>
                  <span class="value">{{ item.trainStartTime }} 至 {{ item.trainEndTime }}</span>
                </div>
                <div class="info-item">
                  <span class="label">培训地点：</span>
                  <span class="value">{{ item.trainAddress }}</span>
                </div>
                <div class="info-item">
                  <span class="label">班主任：</span>
                  <span class="value">{{ item.headTeachers }}</span>
                </div>
              </div>

              <!-- 学员个人信息 -->
              <div class="info-row student-info">
                <div class="info-item">
                  <span class="label">学员职位：</span>
                  <span class="value">{{ item.positionRank }}</span>
                </div>
                <div class="info-item">
                  <span class="label">满意度调查：</span>
                  <span class="value">{{ item.satisfactionStatus }}</span>
                </div>
                <div class="info-item">
                  <span class="label">报名时间：</span>
                  <span class="value">{{ item.registrationTime }}</span>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 空状态提示 -->
          <div v-if="filteredExams.length === 0" class="empty-state">
            <el-empty description="暂无未排考数据"></el-empty>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 查看考卷弹窗（原有） -->
    <el-dialog
      title="考卷详情"
      v-model="dialogVisible"
      width="60%"
      :close-on-click-modal="false"
    >
      <div v-if="currentExam" class="exam-paper-detail">
        <div class="paper-header">
          <h3>{{ currentExam.className }} - 考卷详情</h3>
          <div class="paper-meta">
            <div>考试时间：{{ currentExam.startTime }} 至 {{ currentExam.endTime }}</div>
            <div>考试时长：{{ currentExam.examDuration }}</div>
            <div>通过分数：{{ currentExam.passScore }}</div>
          </div>
        </div>
        <div class="paper-content">
          <p>暂无具体考卷数据，可在此处对接考卷详情接口展示题目和作答情况</p>
        </div>
      </div>
    </el-dialog>

    <!-- 考试须知弹窗（新增） -->
    <el-dialog
      title="考试须知"
      :visible="dialogExamVisible"
      width="40%"
      :close-on-click-modal="false"
    >
      <div v-if="currentExam" class="exam-notice">
        <div class="notice-item">
          <span class="notice-label">培训项目：</span>
          <span class="notice-value">{{ currentExam.project }}</span>
        </div>
        <div class="notice-item">
          <span class="notice-label">开始时间：</span>
          <span class="notice-value">{{ currentExam.startTime }}</span>
        </div>
        <div class="notice-item">
          <span class="notice-label">截止时间：</span>
          <span class="notice-value">{{ currentExam.endTime }}</span>
        </div>
        <div class="notice-item">
          <span class="notice-label">考试时长：</span>
          <span class="notice-value">{{ currentExam.examDuration }}</span>
        </div>
        <div class="notice-item">
          <span class="notice-label">考试地址：</span>
          <span class="notice-value">{{ currentExam.examAddress }}</span>
        </div>
        <div class="notice-item">
          <span class="notice-label">通过分数：</span>
          <span class="notice-value">{{ currentExam.passScore }}</span>
        </div>
        <div class="notice-item notice-remark">
          <span class="notice-label">考试须知：</span>
          <span class="notice-value">
            1. 请在考试时间内完成作答，超时系统将自动交卷<br/>
            2. 考试过程中请勿刷新页面，否则将丢失作答数据<br/>
            3. 本次考试可考{{ currentExam.examTimes }}次，请认真作答
          </span>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogExamVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="startExam"
            :disabled="!isInExamTime"
          >
            开始考试
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getExamInfoByStudentId } from "@/api/training/ClassStudent";
import { getExamRecordInfo } from "@/api/examination/examRecord";

export default {
  name: 'ExamPage',
  props: {
    userId: {
      type: String,
      required: true,
      default: ""
    }
  },
  data() {
    return {
      activeTab: 'all',
      dialogVisible: false, // 查看考卷弹窗
      dialogExamVisible: false, // 考试须知弹窗
      currentExam: null,
      exams: []
    }
  },
  watch: {
    userId: {
      handler(newVal) {
        if (newVal && newVal.trim() !== '') {
          this.getExamList();
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    // 按标签页过滤考试数据
    filteredExams() {
      switch (this.activeTab) {
        case '0':
          return this.exams.filter(item => item.status === '0');
        case '1':
          return this.exams.filter(item => item.status === '1');
        case '2':
          return this.exams.filter(item => item.status === '2');
        default:
          return this.exams;
      }
    },
    // 校验当前时间是否在考试时间范围内
    isInExamTime() {
      if (!this.currentExam || this.currentExam.startTime === '-' || this.currentExam.endTime === '-') {
        return false;
      }
      try {
        const now = new Date();
        // 处理后端返回的时间字符串，兼容常见格式
        const examStart = new Date(this.currentExam.startTime);
        const examEnd = new Date(this.currentExam.endTime);
        // 时间解析失败则返回false
        if (isNaN(examStart.getTime()) || isNaN(examEnd.getTime())) {
          return false;
        }
        return now >= examStart && now <= examEnd;
      } catch (error) {
        console.error('时间校验失败:', error);
        return false;
      }
    }
  },
  methods: {
    // 获取考试列表数据
    async getExamList() {
      try {
        const res = await getExamInfoByStudentId(this.$store.state.user.studentId);
        if (res.code !== 200 || !Array.isArray(res.rows)) {
          this.exams = [];
          this.$message.warning('获取考试数据失败');
          return;
        }

        // 报名类型映射表
        const signUpCategoryMap = {
          special: "特设培训",
          regular: "常规培训",
          custom: "定制培训"
        };

        this.exams = res.rows.map(item => {
          const classStudent = item.classStudent || {};
          const trainClassVo = item.trainClassVo || {};
          const examSchedule = item.examSchedule!==null &&item.examSchedule.examScheduleId !==""? item.examSchedule:{};

          return {
            // 基础标识信息
            id: classStudent.classStudentId || '',
            classNo: trainClassVo.trainingClassCode || '未知编号',
            className: trainClassVo.trainingClassName || '未知班级',
            status: item.examStatus || '0', // 0-未排考 1-已排考 2-已考试

            // 培训基本信息
            trainType: trainClassVo.trainingTypeName || '-',
            project: trainClassVo.trainingProjectName || '未知项目',
            signUpCategory: signUpCategoryMap[trainClassVo.signUpCategory] || '未知报名类型',
            classStatusName: trainClassVo.classStatusName || '-',
            startupType: trainClassVo.startupTypeName || '-',
            departmentName: trainClassVo.trainingDepartmentName || '-',
            trainStartTime: trainClassVo.startDate || '-',
            trainEndTime: trainClassVo.endDate || '-',
            trainAddress: trainClassVo.actualTrainingVenue || trainClassVo.trainingVenue || '-',
            headTeachers: [trainClassVo.headTeacher1Name, trainClassVo.headTeacher2Name]
              .filter(Boolean).join('、') || '-',

            // 考试相关信息
            startTime: examSchedule.examStartTime || '-',
            endTime: examSchedule.examEndTime || '-',
            examDuration: examSchedule.examDuration ? `${examSchedule.examDuration}分钟` : '-',
            examAddress: examSchedule.examLocation || '-',
            examWay: this.formatExamWay(examSchedule.examPathway),
            passScore: examSchedule.examPassScore ? `${examSchedule.examPassScore}分` : '-',
            examTimes: examSchedule.examTimes || '1次',
            releaseResults: examSchedule.ifReleaseResultsImmediately === '1' ? '立即发布' : '延迟发布',

            // 学员个人信息
            positionRank: classStudent.positionRank || '-',
            satisfactionStatus: classStudent.satisfactionSurveyStatus === '0'
              ? '未完成'
              : (classStudent.satisfactionSurveyStatus ? '已完成' : '-'),
            registrationTime: classStudent.createTime || '-'
          };
        });
      } catch (error) {
        console.error('获取考试列表失败:', error);
        this.exams = [];
        this.$message.error('获取考试数据异常，请刷新页面重试');
      }
    },

    // 格式化考试途径（线上/线下）
    formatExamWay(pathway) {
      if (!pathway) return '-';
      const ways = [];
      if (pathway.includes('0')) ways.push('线上');
      if (pathway.includes('1')) ways.push('线下');
      return ways.length > 0 ? ways.join('+') : '-';
    },

    // 获取状态标签样式类
    getTagClass(item) {
      switch (item.status) {
        case '0':
          return 'tag-unscheduled';
        case '1':
          return 'tag-scheduled';
        case '2':
          return 'tag-taken';
        default:
          return '';
      }
    },

    // 获取状态标签文本
    getTagText(item) {
      switch (item.status) {
        case '0':
          return '未排考';
        case '1':
          return '已排考';
        case '2':
          return '已考试';
        default:
          return '';
      }
    },

    // 查看考卷弹窗
    async showExamPaper(exam) {
      this.currentExam = exam;
      this.dialogVisible = true;
      try {
        // 对接考卷详情接口
        const res = await getExamRecordInfo({
          studentId: this.$store.state.user.studentId,
          trainingClassId: exam.classNo,
        });
        console.log('考卷详情数据:', res);
        // 可在此处将考卷数据赋值给currentExam，实现详情展示
      } catch (error) {
        console.error('获取考卷详情失败:', error);
        this.$message.warning('获取考卷详情失败');
      }
    },

    // 打开考试须知弹窗
    openExamDialog(exam) {
      this.currentExam = exam;
      this.dialogExamVisible = true;
      // 非考试时间提示
      // if (!this.isInExamTime) {
      //   this.$message.warning('当前未在考试时间范围内，无法进入考试');
      // }
    },

    // 开始考试逻辑
    startExam() {
      if (!this.isInExamTime) return;
      // 此处替换为实际的考试页面路由跳转
      this.$router.push({
        path: '/exam/do-exam',
        query: {
          examId: this.currentExam.id,
          classNo: this.currentExam.classNo
        }
      });
      this.dialogExamVisible = false;
    }
  }
}
</script>

<style scoped>
.exam-page {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 64px);
}

.custom-tabs {
  background-color: #fff;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

::v-deep .el-tabs__header {
  margin-bottom: 20px;
}

::v-deep .el-tabs__item {
  font-size: 14px;
  color: #6b7280;
  padding: 0 16px;
}

::v-deep .el-tabs__item.is-active {
  color: #165dff;
  font-weight: 500;
}

::v-deep .el-tabs__active-bar {
  background-color: #165dff;
  height: 2px;
}

.exam-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.exam-card {
  border: none;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
}

.exam-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: #f9fafb;
  border-bottom: 1px solid #f0f2f5;
}

.exam-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
}

.exam-tag {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.tag-taken {
  background-color: #e6f7ff;
  color: #165dff;
}

.tag-unscheduled {
  background-color: #fff7e6;
  color: #ff7d00;
}

.tag-scheduled {
  background-color: #f0fff4;
  color: #00b42a;
}

.exam-info {
  padding: 16px 20px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-bottom: 12px;
}

.exam-specific {
  background-color: #f9fafc;
  padding: 8px 0;
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  border-left: 3px solid #e5e6eb;
}

.student-info {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e5e6eb;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-item {
  display: flex;
  align-items: center;
  min-width: 220px;
}

.label {
  font-size: 14px;
  color: #6b7280;
  margin-right: 8px;
  white-space: nowrap;
}

.value {
  font-size: 14px;
  color: #1f2329;
  line-height: 1.5;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #e8e8e8;
  gap: 8px;
}

.empty-state {
  padding: 48px 0;
  text-align: center;
}

/* 考卷详情弹窗样式 */
.exam-paper-detail {
  line-height: 1.8;
}

.paper-header {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
}

.paper-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: #6b7280;
  font-size: 14px;
}

/* 考试须知弹窗样式 */
.exam-notice {
  padding: 16px 0;
}

.notice-item {
  display: flex;
  margin-bottom: 12px;
  align-items: flex-start;
}

.notice-label {
  min-width: 80px;
  color: #6b7280;
  font-size: 14px;
  flex-shrink: 0;
}

.notice-value {
  color: #1f2329;
  font-size: 14px;
  flex: 1;
}

.notice-remark {
  margin-top: 8px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 响应式适配 */
@media (max-width: 1200px) {
  .info-item {
    min-width: 180px;
  }
}

@media (max-width: 768px) {
  .exam-page {
    padding: 16px;
  }

  .info-row {
    gap: 12px 16px;
  }

  .info-item {
    min-width: 100%;
  }

  .paper-meta {
    flex-direction: column;
    gap: 5px;
  }
}
</style>
